const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

/** @type { import('webpack').Configuration } */
const config = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                // 打包其他资源(除了html/js/css资源以外的资源)
                exclude: /\.(html|css|js)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 每次打包都先删除目录，参数是一个数组，数组中是需要删除的目录名，默认是打包的输出目录
        // 不带{}require的话会报：CleanWebpackPlugin is not a constructor错误
        new CleanWebpackPlugin()
    ],
    mode: 'development'
};

module.exports = config;
